import React , { Component } from 'react';


import { withRouter,NavLink} from 'react-router-dom';
import {observer,inject} from 'mobx-react';
// 导入需要的模块
@withRouter
@inject('obs')
@observer
class View extends Component {
    constructor(props){
        super(props)
        this.state = {
            name:'这是结果吗'
        }
    }

    obs = this.props.obs;

    doAction(e){
        let {updateNameStr,} = this.props.obs;
        updateNameStr(this.state.name,'ssss')
    }
    render(){
        let {updateNameStr,objCfg,num} = this.props.obs;
        return(
            <div className="m">
            <NavLink to="/">首页</NavLink><br/>
            <NavLink to="/input">表单</NavLink><br/>
            <NavLink to="/event">事件</NavLink><br/>
            <NavLink to="/storedemo">storedemo</NavLink><br/>
            <NavLink to="/observable">observable</NavLink><br/>
            <NavLink to="/newobs">newobs</NavLink><br/>
                <h2>这是今天讲的课程内容：{num}</h2>
                <dl>
                    <dt>第一步创建路由</dt>
                    <dd>
                        <p>修改App.js 增加新的路由</p>
                        <p>修改对应 view/ 新增加页面</p>
                    </dd>
                    <dt>第二步编写store</dt>
                    <dd>
                        <p>创建store/obs.js文件</p>
                        <p>导入react-mobx 模块  使用class   export </p>
                    </dd>
                    <dt>第二步router</dt>
                    <dd>
                        <p>创建store/obs.js文件</p>
                        <p>直接接受：{objCfg.name}</p>
                        <p>接受描述：{objCfg.des}</p>
                        <p>接受描述：<input type="button" onClick={(e)=>this.doAction(e)} value="点击改变"/></p>
                    </dd>
                </dl>
            </div>
        )
    }
}

export default View;
